<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>图片视差效果</title>
</head>

<body>
    <div class="pimg1">
        <div class="ptext">
            <span class="border">
                MS Online
            </span>
        </div>
    </div>
    <section class="section section-light">
        <h2>米修在线</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam dolorum ducimus mollitia, necessitatibus ipsum ullam qui maxime error atque, suscipit dignissimos delectus neque, repudiandae fugiat optio aliquid fugit laboriosam nisi excepturi
            recusandae accusamus molestias. Eaque eum minima aperiam unde nesciunt? Voluptatum, aperiam perferendis maiores excepturi neque hic nemo saepe, cumque quaerat a obcaecati vel commodi ipsa minima consequuntur nam, voluptatem omnis facilis totam?
            Corrupti magni velit commodi voluptatum perspiciatis cum numquam adipisci, molestias, quas, neque vero quo nemo at porro.</p>
    </section>
    <div class="pimg2">
        <div class="ptext">
            <span class="border">
                Image Two
            </span>
        </div>
    </div>
    <section class="section section-dark">
        <h2>关于我们</h2>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam dolorum ducimus mollitia, necessitatibus ipsum ullam qui maxime error atque, suscipit dignissimos delectus neque, repudiandae fugiat optio aliquid fugit laboriosam nisi excepturi
            recusandae accusamus molestias. Eaque eum minima aperiam unde nesciunt.</p>
    </section>
    <div class="pimg3">
        <div class="ptext">
            <span class="border">
                Image Three
            </span>
        </div>
    </div>
    <section class="section section-light">
        <h2>联系我们</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, dolorum quidem cumque consectetur tenetur id placeat harum quas magni, earum nostrum magnam explicabo? Ab, eius distinctio. Enim quasi autem illo odio blanditiis doloremque laborum
            reprehenderit repudiandae neque aspernatur, magni, nemo, aut minus modi in nesciunt officia earum est impedit. Nam!</p>
    </section>
    <div class="pimg4">
        <div class="ptext">
            <span class="border">
                Image Four
            </span>
        </div>
    </div>
</body>

</html>